@import "../../../style/var.scss";

html, body, #app {
    background: #f0f0f0;
    font-size: 30px;
    //overflow: hidden;
    max-width: 750PX;
    height: auto;
}

body {
    position: relative;
}

.list-loading {
    text-align: center;
    padding: 20px;
    color: #666;
    justify-content: center;
    align-items: center;
    flex: 1;
}

#app {
    display: block;
    //min-height: 100%;
    //overflow-y: auto;
    //-webkit-overflow-scrolling: touch;

    * {
        -webkit-tap-highlight-color: rgba(218, 56, 69, 0.1);
    }

    &.tab-bar {
        padding-bottom: 100px;
    }
}

a, button {
    &:active {
        opacity: .8;
    }
}

a {
    color: #45a5f4;
}

.detail-html {
    line-height: 1.4;
    color: #222;
    padding: 20px 0;
    text-align: justify;

    img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
    }
}

.form-wrap {
    padding-bottom: 10px;

    .form-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;

        & > label, .label {
            white-space: nowrap;
            text-align-last: justify;
            text-align: justify;
            flex: 0 0 5em;
            padding-right: 1em;
            color: #333;
            font-size: 28px;
        }
    }

    .arrow {
        background: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' data-spm-anchor-id='a313x.7781069.0.i0' width='128' height='128'%3E%3Cpath d='M281.896 999.731c-6.19 0-12.38-2.427-17.112-7.16-9.467-9.467-9.467-24.88 0-34.346L708 515.13 264.784 71.91c-9.467-9.466-9.467-24.88 0-34.345 9.466-9.467 24.88-9.467 34.345 0l460.33 460.33c9.466 9.466 9.466 24.879 0 34.345l-460.33 460.33a24.465 24.465 0 0 1-17.233 7.16z' fill='%23aaa'/%3E%3C/svg%3E") no-repeat right center;
        background-size: 25px;
        padding-right: 40px !important;
        line-height: 1;
    }

    .validate-img {
        height: 70px;
    }

    .content {
        position: relative;
        flex: 1;
        min-height: 80px;
        display: flex;
        align-items: center;

        select {
            direction: rtl;
        }

        input:not([type='date']), select {
            width: 100%;
            height: 100%;
            border: none;
            text-align: right;
            font-size: 28px;
            padding: 0;
            background: transparent;
            outline: none;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
        }

        input[type='date'] {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            opacity: 0;
            z-index: 2;
        }

        &.h50 {
            height: 50px;
        }

        input.border {
            border: 1px solid #ccc;
            border-radius: 5px;
            min-height: 50px !important;
            text-align: left;
            padding-left: 20px;
        }

        &.co {
            color: #999;
        }


    }

    .block {
        display: block;
        border: none;

        & > label, .label {
            display: block;
            width: auto;
            text-align-last: left;
            text-align: left;
            padding: 18px 0;
        }

        .content {
            padding: 0;
            display: block;
        }

        input, textarea {
            border: 1px solid #ccc;
            min-height: 120px;
            text-align: left;
            padding: 10px;
            width: 100%;
            min-width: 100%;
            font-size: 28px;
            border-radius: 5px;

            &:disabled {
                background: transparent;
            }
        }
    }

    &.left-align {
        .content {
            input, textarea, select {
                text-align: left;
                direction: ltr;
            }
        }
    }

    &.text-color {
        .content {
            color: #9c9c9c;
        }
    }

    .submit-btn {
        margin: 20px 0;
        letter-spacing: 1PX;

        &.ghost {
            background: #fff;
            color: #ff7401;
            border: 1px solid #ff7401;
            margin-right: 10px;
        }
    }
}

.course-list-box {
    background-color: #fff;
    flex-wrap: wrap;

    .item {
        width: 345px;
        flex: 0 0 245px;
        background-color: #f1f1f1;
        margin: 20px 0;

        .name {
            padding: 15px;
            font-size: 28px;
            color: #000;
        }
    }
}

.search-wrap {
    position: relative;
    height: 110px;
    padding: 20px 20px;

    i {
        position: absolute;
        left: 40px;
        top: 40px;
    }

    input {
        flex: 1;
        height: 100%;
        border: none;
        border-radius: 30px;
        padding-left: 75px;
        padding-right: 20px;
    }

    button {
        flex: 0 0 140px;
        border-radius: 30px;
        font-size: 30px;
        background-color: $main-color;
        margin-left: 20px;
    }
}
